
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>客房类型列表</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../css/global.css">
  <link rel="stylesheet" href="../css/admin.css">
  <script src="../layui/layui.js"></script>
</head>
<body style="padding-top: 10px">
<!-- 搜索表单开始 -->
<form class="layui-form">

  <div class="layui-inline">
    <input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加">
  </div>
</form>
<!-- 搜索表单结束 -->

<!-- 动态表格 -->
<table border="1" width="80%" align="center" class="layui-table" id="table" lay-filter="table">
</table>

<!-- 工具条 -->
<script type="text/html" id="optionBar">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
</script>

<!-- 添加表单开始 -->
<div id="addContainer" style="display: none">
  <form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

    <div class="layui-form-item">
      <label class="layui-form-label">客房编号</label>
      <div class="layui-input-block">
        <input type="text" id="add-roomTypeId" name="roomTypeId"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">客房类型</label>
      <div class="layui-input-block">
        <input type="text" id="add-roomType" name="roomType"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">图片</label>
      <div class="layui-input-block">
        <img id="pic" src='../images/room/11.jpg' style="width:80px;height:80px" />
        <span id="upload_tips"></span>
      </div>
    </div>

    <!-- 用于记录上传图片的名称，用于存储在数据库中 -->
    <input type="hidden" id="last_image" value="default.jpg"/>
  </form>
</div>
<!-- 添加表单结束 -->



<!-- 修改表单开始 -->
<div id="updateContainer" style="display: none">
  <form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

    <div class="layui-form-item">
      <label class="layui-form-label">客房编号</label>
      <div class="layui-input-block">
        <input type="text" id="update-roomTypeId" name="roomTypeId"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">客房类型</label>
      <div class="layui-input-block">
        <input type="text" id="update-roomType" name="roomType"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">图片</label>
      <div class="layui-input-block">
        <img id="update_pic" src='../images/room/11.jpg' style="width:80px;height:80px" />
        <span id="update_upload_tips"></span>
      </div>
    </div>

    <!-- 用于记录上传图片的名称，用于存储在数据库中 -->
    <input type="hidden" id="update_last_image" value="default.jpg"/>
  </form>
</div>
<!-- 修改表单结束 -->


<script>
  layui.use(['jquery', 'table', 'layer', 'form','upload'], function () {

            var $ = layui.jquery;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;


    // 2.动态加载数据，回显到页面中（渲染数据）
    table.render({
      // 绑定表格 - table标签的id属性
      elem: '#table'
      , id: 'tableReload'
      // 动态加载数据的后台 Servlet 地址
      , url: '/roomtype/list'
      , title: '客房类型列表'
      // 定义表格各列
      , cols: [[
        {field: 'roomTypeId', title: '客房编号', width: '10%'}
        , {field: 'roomType', title: '客房类型', width: '15%'}
        , {field: 'roomTypeImage', title: '客房图片', width: '8%'}
        , {fixed: 'right', title: '操作', toolbar: '#optionBar'}
      ]]
      ,
      response: {
        statusCode: 200,
      }
    });

    // 4.监听工具条中相关的按钮，实现相关的操作
    // 监听 table 行工具事件 - 实现删除与修改操作
    table.on('tool(table)', function (obj) {
      // 获取当前行的数据
      let currentRow = obj.data;

      // 获取table工具条件的具体事件，事件名称通过lay-event定义
      let layuiEvent = obj.event;

      // 判断用户单击哪个按钮
      if (layuiEvent === 'delete') {

        // 弹出删除确认框，index为确认框的唯一索引
        layer.confirm('是否确定删除？', function (index) {
          $.ajax({
            url: '/deleteRoomType',
            type: 'get',
            data: {
              'roomTypeId': currentRow.roomTypeId,
            },
            success: function (res) {
              if (res.code == 200) {
                // 重新加载表格数据
                table.reload('tableReload', {page: {curr: 1}});
                // 通过index索引关闭确认框
                layer.close(index);
                // 提示
                layer.msg(res.message);
                return;
              }
              layer.msg(res.message);
            }
          });
        });

      } else if (layuiEvent === 'update') {
        let r = obj.data;
        $("#update-roomTypeId").val(r.roomTypeId);
        $("#update-roomType").val(r.roomType);
       // $("#update_pic").prop("src","../images/room/" + currentRow.roomTypeImage) ;
        $("#last_image").val(r.roomTypeImage);

        // 重新渲染表单
        form.render();

        layer.open({
          type: 1,
          title: '修改客房类型',
          area: ['50%', '35em'],
          resize: false,
          content: $("#updateContainer"),
          btn: ['修改', '取消'],
          btn1: function (index) {
            $.ajax({
              url: '/updateRoomType',
              method: 'post',
              data: $("#updateForm").serialize(),
              success: function (res) {
                console.log(res)
                layer.msg(res.message)
                // 根据弹出层的索引，关闭弹出确认框
                layer.close(index);

                if (res.code == 200) {
                  table.reload('table_data', {page: {curr: 1}});
                }
              }
            })
          }
        });
      }

    });


    // 6.添加数据 - 弹出添加表单
    $("#addBtn").click(function () {
      layer.open({
        type: 1,
        title: '添加客房类型',
        area: ['50%', '35em'],
        resize: false,
        content: $("#addContainer"),
        btn: ['确定', '取消'],
        // 确定按钮
        btn1: function (index) {
          $.ajax({
            url: '/addRoomType',
            method: 'post',
            data: {
              roomTypeId: $("#add-roomTypeId").val(),
              roomType: $("#add-roomType").val(),
              roomTypeImage: $("#last_image").val()
            },
            success: function (res) {
              console.log(res)
              // 弹出提示框
              layer.msg(res.message)
              // 根据弹出层的索引，关闭弹出确认框
              layer.close(index);

              if (res.code == 200) {
                // 重新加载表格数据
                table.reload('tableReload', {page: {curr: 1}});
              }
            }
          });
        },
      });
    });

    // 5.上传图片
    let uploadInst = upload.render({
      // 绑定浏览文件元素
      elem: '#pic',

      // 实现上传功能的服务器端程序
      url: '/UploadPRoomType',

      data:{
        // 动态赋值
        last_image:function () {
          return $("#last_image").val();
        }
      },

      // 设置允许上传的文件类型
      accept: 'file',

      // 设置允许上传的文件后缀
      exts: 'jpg|png|jpeg',

      // 设计允许上传文件的大小，单位：KB
      size: 10 * 1024,

      // 绑定上传控件的字段名，便于服务器获取上传文件
      field: "attach",

      // 设置不自动上传
      auto: true,

      // 上传成功的回调
      done: function (res) {
        // res参数：服务器响应回来的数据，可以封装为responseData对象
        // 上传成功后，设置文件名到隐藏域中
        if(res.code == 200) {
          $("#last_image").val(res.data) ;
          $("#upload_tips").html("<b style='color:green'>上传成功</b>") ;
          return ;
        }
        $("#upload_tips").html("<b style='color:red'>上传失败: " + res.message + "</b>") ;
      },
      // 上传失败的回调
      error: function () {
        layer.msg('图片上传失败~~', { icon: 5 });
      },
      // 选择文件后的回调
      choose: function (obj) {
        obj.preview(function (index, file, result) {

          // 显示图片
          $("#pic").prop("src", result);
        });
      }
    });

    // 7.删除无效的上传图片
    function deleteProductImage() {
      // 还原表单
      $("#upload_tips").html("") ;
      $("#pic").prop("src",'../images/room/11.jpg');


      // 发起异步请求，实现图片删除 - 排除默认图片
      $.ajax({
        url:'/deleteImage',
        method:'post',
        data:{'last_image':$('#last_image').val()},
        success:function( res ){
          if(res.code==200) {
            $('#last_image').val('/image/room/11.jpg') ;
          }
        }
      });
    }







  });




</script>

</body>
</html>
